<template>
  <div class="clearfix wrap">
    <div id="slider">
      <div class="slider-container clearfix">
        <div class="slider-wrapper " id="dateList">
          <div v-for="(item, $index) in list" v-bind:key="$index" class="date-item"
                v-bind:class="{active: $index==activeIndex}"
                @click="handleActive($index, item)">
                <p class="list-item">{{item}}组</p>
          </div>
        </div>
      </div>
    </div>
    <div class="arrow arrow-prev " v-bind:class="{disabled:dateIndex==0}" @click="animate('right')">
        <div class="prev"></div>
    </div>
    <div class="arrow arrow-next" v-bind:class="{disabled:rightIndex}" @click="animate('left')">
        <div class=" next"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array
    }
  },
  computed: {
    rightIndex () {
      return this.dateIndex >= this.list.length - 8
    }
  },
  data () {
    let dateList = this.list
    return {
      dateIndex: 0,
      activeIndex: 0,
      dateList
    }
  },
  methods: {
    animate (direction) {
      let _this = this
      let dl = document.querySelector('#dateList')
      if (direction === 'left') {
        if (_this.dateIndex >= _this.list.length - 7) {
          return
        }
        _this.dateIndex++
      } else {
        if (_this.dateIndex <= 0) {
          return
        }
        _this.dateIndex--
      }
      dl.style.left = '-' + _this.dateIndex * 105 + 'px'
    },
    handleActive (i, d) {
      this.activeIndex = i
      this.$emit('check', {
        index: i,
        date: d
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.slider-container{
  width:730px;
  overflow: hidden;
  transition-duration: 0ms;
  transform: translate3d(0px, 0px, 0px);
  z-index: 10;
  height: 100%;
  .slider-wrapper{
    width:10000px!important;
    transition-property:transform;
    z-index: 11;
    position: absolute;
  }
}
.date-item{
  width: 100px;
  height: 118px;
  border: 1px solid #f5f5f5;
  cursor: pointer;
  float: left;
  margin-right: 5px;
  position: relative;
  &.active{
    border-color:#00bb90;
    border-top:3px solid #00bb90;
    background: #f5f5f5;
    padding: 15px 0;    
  }
  .list-item{
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -10px;
    font-size: 16px;
    color:#333;
    font-weight: 700;
  }
}
.prev,.next {
  background-repeat: no-repeat;
  height: 44px;
  width: 16px;
  background-size: 100%;
  margin: 37px auto;
}
.arrow {
  width: 32px;
  height: 118px;
  background: #fff;
  display: block;
  border: 1px solid #f5f5f5;
  cursor: pointer;
  position: absolute;
  top: 0;
  &.disabled {
    background: #d5d9db;
    cursor: not-allowed;
    border: 0;
  }
  &.arrow-prev {
    left: 0;
  }
  &.arrow-next {
    right: 17px;
  }
}
.date-item.active .list-item {
  color: #00bb90;
}
.next {
  background: url('/static/images/arrow-r.png') center no-repeat;
}
.prev {
  background: url('/static/images/arrow-l.png') center no-repeat;
}
.disabled {
  .next {
    background: url('/static/images/arrow-right.png') center no-repeat;
  }
  .prev {
    background: url('/static/images/arrow-left.png') center no-repeat;
  }
}
#slider {
  width: 730px;
  height: 118px;
  overflow: hidden;
  float: left;
  margin-left: 43px;
  ul {
    width: 10000px;
    position: relative;
  }
}
.wrap {
  position: relative;
  margin-top: 20px;
}

</style>
